<template>
    <form class="login-form" action="#">
        <h1>Login</h1>
        <div class="txtb">
            <input type="text" name="username" value="" class="">
            <span data-placeeholder="Username"></span>
        </div>
        <div class="txtb">
            <input type="password" name="password" value="" class="">
            <span data-placeeholder="Password"></span>
        </div>
        <input type="submit" class="logbtn" name="" value="Login">
        <div class="bottom-text">
            Don't have account? <a> Sign up</a>
        </div>
    </form>
</template>

<script>
    import '../assets/css/login.css'
    export default {
        name: "Login",
        data() {
            return {

            }
        },
        mounted() {
            $(".txtb input").on("focus", function () {
                $(this).addClass("focus");
            });

            $(".txtb input").on("blur", function () {
                if ($(this).val() === "") {
                    $(this).removeClass("focus");
                }
            })
        }
    }
</script>

<style lang="less" scoped>

</style>
